﻿<template>
  <div class="order-header">
    <!-- 订单信息行 -->
    <div class="order-info-row">
      <!-- 勾选框 -->
      <div class="order-checkbox">
        <el-checkbox
          type="checkbox"
          :checked="orderData.checked || false"
          @change="handleCheckboxChange"
          class="checkbox-input"
        />
      </div>

      <!-- 左侧信息 -->
      <div class="order-info-left">
        <div class="order-number">
          <span class="label">订单编号：</span>
          <span class="value copy">{{ orderData.orderNo || "12345678900987654321" }}</span>
          <base-icon name="iconfont ic-fuzhi" @click="handleCopy(orderData.orderNo)" color="var(--ct4)" />
          <el-divider direction="vertical" />
        </div>

        <div class="order-time">
          <span class="label">下单时间：</span>
          <span class="value">{{ formatTime(orderData.createTime) }}</span>
          <el-divider direction="vertical" />
        </div>

        <div class="store-info">
          <span class="label">店铺：</span>
          <span class="value">{{ orderData.storeName || "大鱼租机(7058788)" }}</span>
          <el-divider v-if="getStatusInfo(orderData.status).displayInfo.length > 0" direction="vertical" />
        </div>

        <!-- 根据状态动态显示信息 -->
        <template v-for="info in getStatusInfo(orderData.status).displayInfo" :key="info.key">
          <div v-if="info.value" class="info-item">
            <span class="label">{{ info.label }}：</span>
            <span class="value">{{ info.value }}</span>
          </div>
        </template>
      </div>

      <!-- 右侧信息 -->
      <div class="order-info-right">
        <div class="remaining-time">
          <span class="label">剩余审核时间：</span>
          <span class="value urgent">{{ getRemainingTime() }}</span>
        </div>
        <div class="status-badge" :class="`status-${orderData.status}`">
          {{ getStatusText(orderData.status) }}
        </div>
      </div>
    </div>
    <!-- 订单状态tags -->
    <div class="order-info-bottom">
      <div class="order-info-bottom-tags">
        <div
          class="order-info-bottom-tags-item"
          :class="`tag-${tag.type}`"
          v-for="tag in getStatusInfo(orderData.status).tags"
          :key="tag.label"
        >
          {{ tag.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps({
    orderData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  });

  const emit = defineEmits(["checkbox-change"]);

  // 获取状态文本和相关信息
  const getStatusInfo = status => {
    const isEnterprise = props.orderData.orderType === "enterprise";
    const rentalType = isEnterprise ? "企业租赁" : "个人租赁";

    const statusMap = {
      pending_payment: {
        text: "待支付",
        timeLabel: "确认时间",
        timeValue: props.orderData.confirmTime,
        displayInfo: [{ key: "confirmTime", label: "确认时间", value: formatTime(props.orderData.confirmTime) }],
        tags: [
          { label: "全托店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "非派单订单", type: "default" },
        ],
      },
      pending_dispatch: {
        text: "待派单",
        timeLabel: "下单时间",
        timeValue: props.orderData.createTime,
        displayInfo: [],
        tags: [
          { label: "全托店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "非派单订单", type: "default" },
        ],
      },
      pending_review: {
        text: "待审核",
        timeLabel: "派单时间",
        timeValue: props.orderData.dispatchTime,
        displayInfo: [{ key: "dispatchTime", label: "派单时间", value: formatTime(props.orderData.dispatchTime) }],
        tags: [
          { label: "全托店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "派单订单", type: "default" },
          { label: "拒单3次", type: "danger" },
          { label: "已公证", type: "success" },
          { label: "已投保", type: "success" },
        ],
      },
      rejected: {
        text: "已拒单",
        timeLabel: "拒单时间",
        timeValue: props.orderData.rejectTime,
        displayInfo: [{ key: "rejectTime", label: "拒单时间", value: formatTime(props.orderData.rejectTime) }],
        tags: [
          { label: "平台店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "派单订单", type: "default" },
          { label: "拒单3次", type: "danger" },
          { label: "已公证", type: "success" },
          { label: "已投保", type: "success" },
        ],
      },
      pending_shipment: {
        text: "待发货",
        timeLabel: "审核时间",
        timeValue: props.orderData.reviewTime,
        displayInfo: [{ key: "reviewTime", label: "审核时间", value: formatTime(props.orderData.reviewTime) }],
        tags: [
          { label: "全托店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "派单订单", type: "default" },
          { label: "已公证", type: "success" },
          { label: "已投保", type: "success" },
        ],
      },
      pending_receipt: {
        text: "待收货",
        timeLabel: "发货时间",
        timeValue: props.orderData.shipTime,
        displayInfo: [{ key: "shipTime", label: "发货时间", value: formatTime(props.orderData.shipTime) }],
        tags: [
          { label: "平台店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "派单订单", type: "default" },
          { label: "已公证", type: "success" },
          { label: "已投保", type: "success" },
        ],
      },
      renting: {
        text: "租用中",
        timeLabel: "收货时间",
        timeValue: props.orderData.receiptTime,
        displayInfo: [{ key: "receiptTime", label: "收货时间", value: formatTime(props.orderData.receiptTime) }],
        tags: [
          { label: "平台店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "派单订单", type: "default" },
          { label: "已公证", type: "success" },
          { label: "已投保", type: "success" },
        ],
      },
      pending_settlement: {
        text: "待结算",
        timeLabel: "申请时间",
        timeValue: props.orderData.applyTime,
        displayInfo: [{ key: "applyTime", label: "申请时间", value: formatTime(props.orderData.applyTime) }],
        tags: [
          { label: "平台店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "派单订单", type: "default" },
          { label: "已公证", type: "success" },
          { label: "已投保", type: "success" },
        ],
      },
      completed: {
        text: "已完成",
        timeLabel: "完成时间",
        timeValue: props.orderData.completeTime,
        displayInfo: [{ key: "completeTime", label: "完成时间", value: formatTime(props.orderData.completeTime) }],
        tags: [
          { label: "平台店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "派单订单", type: "default" },
          { label: "已公证", type: "success" },
          { label: "已投保", type: "success" },
        ],
      },
      closed: {
        text: "已关闭",
        timeLabel: "关闭时间",
        timeValue: props.orderData.closeTime,
        displayInfo: [{ key: "closeTime", label: "关闭时间", value: formatTime(props.orderData.closeTime) }],
        tags: [
          { label: "平台店铺", type: "default" },
          { label: rentalType, type: "default" },
          { label: "派单订单", type: "default" },
        ],
      },
    };
    return (
      statusMap[status] || {
        text: "未知状态",
        timeLabel: "时间",
        timeValue: "",
        displayInfo: [],
        tags: [],
      }
    );
  };

  // 获取状态文本（保持兼容性）
  const getStatusText = status => {
    return getStatusInfo(status).text;
  };

  // 格式化时间
  const formatTime = time => {
    if (!time || time === "" || time === null || time === undefined) return "";
    try {
      const date = new Date(time);
      if (isNaN(date.getTime())) return "";
      return date.toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
      });
    } catch {
      return "";
    }
  };

  // 计算剩余审核时间
  const getRemainingTime = () => {
    if (!props.orderData.dispatchTime) return "09:15:18";

    // 假设审核时间为24小时
    const dispatchTime = new Date(props.orderData.dispatchTime);
    const reviewDeadline = new Date(dispatchTime.getTime() + 24 * 60 * 60 * 1000);
    const now = new Date();

    if (now >= reviewDeadline) {
      return "00:00:00";
    }

    const remaining = reviewDeadline - now;
    const hours = Math.floor(remaining / (1000 * 60 * 60));
    const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((remaining % (1000 * 60)) / 1000);

    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
  };

  // 处理checkbox变化
  const handleCheckboxChange = event => {
    emit("checkbox-change", {
      orderId: props.orderData.id,
      checked: event.target.checked,
    });
  };

  const handleCopy = value => {
    navigator.clipboard.writeText(value);
    $msg.success("复制成功");
  };
</script>

<style lang="scss" scoped>
  :deep(.el-divider--vertical) {
    margin: 0 12px;
  }
  .order-header {
    background: var(--bg);
  }

  .order-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px 10px 16px;
    gap: 8px;
    background: linear-gradient(360deg, #ffffff 0%, #f1edff 100%);
  }

  .order-checkbox {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .checkbox-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    // accent-color: var(--primary-color, #409eff);
  }

  .order-info-left {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0; // 允许内容收缩
  }

  .order-info-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .order-number,
  .order-time,
  .info-item,
  .store-info,
  .remaining-time {
    display: flex;
    align-items: center;
    font-size: 14px;
    white-space: nowrap;
  }

  .label {
    color: var(--ct3);
    font-weight: 400;
  }

  .value {
    color: var(--ct1);
    font-weight: 400;
  }
  .copy {
    color: var(--bd);
    margin-right: 4px;
  }

  .copy-icon {
    width: 14px;
    height: 14px;
    color: var(--ct2);
    cursor: pointer;
    margin-left: 4px;

    &:hover {
      color: var(--ct1);
    }
  }
  .value.urgent {
    color: var(--dr);
    font-weight: 500;
  }

  .copy-icon {
    width: 14px;
    height: 14px;
    color: var(--ct2);
    cursor: pointer;
    margin-left: 4px;

    &:hover {
      color: var(--ct1);
    }
  }

  .status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;

    &.status-pending_payment {
      background: var(--dr9);
      color: var(--dr);
      border: 1px solid var(--dr8);
    }

    &.status-pending_dispatch {
      background: var(--wr9);
      color: var(--wr);
      border: 1px solid var(--wr8);
    }

    &.status-pending_review {
      background: var(--wr9);
      color: var(--wr);
      border: 1px solid var(--wr8);
    }

    &.status-rejected {
      background: var(--dr9);
      color: var(--dr);
      border: 1px solid var(--dr8);
    }

    &.status-pending_shipment {
      background: var(--wr9);
      color: var(--wr);
      border: 1px solid var(--wr8);
    }

    &.status-pending_receipt {
      background: var(--lk9);
      color: var(--lk);
      border: 1px solid var(--lk8);
    }

    &.status-renting {
      background: var(--lk9);
      color: var(--lk);
      border: 1px solid var(--lk8);
    }

    &.status-pending_settlement {
      background: var(--wr9);
      color: var(--wr);
      border: 1px solid var(--wr8);
    }

    &.status-completed {
      background: var(--sc9);
      color: var(--sc);
      border: 1px solid var(--sc8);
    }

    &.status-closed {
      background: var(--fl1);
      color: var(--ct3);
      border: 1px solid var(--cb1);
    }
  }

  .order-info-bottom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0 16px;
    margin: 0 16px;
    border-bottom: 1px dashed var(--cb1);

    .order-info-bottom-tags {
      display: flex;
      gap: 8px;
    }

    .order-info-bottom-tags-item {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;

      &.tag-default {
        color: var(--ct3);
        border: 1px solid var(--cb1);
      }

      &.tag-success {
        color: var(--sc);
        border: 1px solid var(--sc8);
      }

      &.tag-danger {
        color: var(--dr);
        border: 1px solid var(--dr8);
      }
    }
  }
</style>
